<link href="__STATIC__/css/tree.css" rel="stylesheet" type="text/css"/>
<section class="content-header">
    <h1>
        菜单管理
        <small>菜单列表</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="{:U('/Admin/index')}"><i class="fa fa-home"></i>首页</a></li>
        <li class="active">菜单管理</li>
    </ol>
</section>
<!-- Main content -->
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-body">
                    <table id="table" class="table table-bordered table-striped"  width="100%">
                        <thead>
                        <tr>
                            <th style="width: 50px">菜单ID</th>
                            <th style="width: 40px">排序</th>
                            <th>菜单名称</th>
                            <th style="text-align: center;">操作</th>
                        </tr>
                        </thead>
                        <tbody id="dataBody"></tbody>
                    </table>
                </div><!-- /.box-body -->
            </div><!-- /.box -->
        </div><!-- /.col -->
    </div><!-- /.row -->
</section><!-- /.content -->
<!-- DATA TABES SCRIPT -->
<!-- page script -->
<script type="text/javascript">
    $(function () {
        $('#table').dataTable({
            "autoWidth": true,
            "searching": false,
            "ordering": false,
            "paging": false,
            "language": lang
        });
        $('.dataTables_empty').remove();
        $('.dataTables_info').remove();
        $.getJSON("{:U('System/menuList')}", function (json) {
            getChild(json, 0, 0);
            $('.tree-hit').each(function () {
                $(this).click(function () {
                    if ($(this).hasClass('tree-collapsed')) {
                        $(this).removeClass('tree-collapsed');
                        $(this).addClass('tree-expanded');
                        $(this).removeClass('tree-collapsed-hover');
                        $(this).removeClass('tree-expanded-hover');
                        $(this).parent().find('.tree-folder').addClass('tree-folder-open');
                        var treeNode = $(this).attr("child");
                        toggle($("." + treeNode), true);
                    } else {
                        $(this).removeClass('tree-expanded');
                        $(this).addClass('tree-collapsed');
                        $(this).removeClass('tree-collapsed-hover');
                        $(this).removeClass('tree-expanded-hover')
                        $(this).parent().find('.tree-folder').removeClass('tree-folder-open');
                        var treeNode = $(this).attr("child");
                        toggle($("." + treeNode), false);
                    }
                });
                $(this).hover(function () {
                    if ($(this).hasClass('tree-collapsed')) {
                        $(this).addClass('tree-collapsed-hover');
                    } else {
                        $(this).addClass('tree-expanded-hover');
                    }
                }, function () {
                    if ($(this).hasClass('tree-collapsed')) {
                        $(this).removeClass('tree-collapsed-hover');
                    } else {
                        $(this).removeClass('tree-expanded-hover');
                    }
                })
            });
        });
    });

    function toggle(p, show) {
        p.each(function() {
            if(($(this).find('.tree-expanded').length>0&&show)||!show){
                var c = $("." + $(this).attr('child'));
                if (c.length > 0) {
                    c.each(function () {
                        toggle($(this), show);
                    });
                }
            }
            if (show) {
                $(this).show();
            } else {
                $(this).hide();
            }
        })

    }
    function getChild(json, l, pid) {
        var space = '';
        for (var j = 0; j < l; j++) {
            space += '<span class="tree-indent"></span>';
        }
        l++;
        for (var i = 0; i < json.length; i++) {
            var data = json[i];
            var html = '<tr class="tree_' + pid + '"  child="tree_' + data.id + '">' +
                    '<td>' + data.id + '</td>' +
                    '<td><input type="text" style="text-align:center;height: 20px" size="2" value="' + data.listorder + '" id="system_menu_order_input'+data.id +'" onblur="systemMenuOrder('+data.id +')"></td>' +
                    '<td><div class="datagrid-cell datagrid-cell-c1-name" style=";height:auto;">' + space;
            if (data.children.length > 0) {
                html += '<span class="tree-hit tree-expanded" child="tree_' + data.id + '"></span><span class="tree-icon tree-folder tree-folder-open"></span>';
            } else {
                html += '<span class="tree-icon tree-file "></span>';
            }
            html += '<span class="tree-title">' + data.name + '</span></div></td><td><div class="datagrid-cell datagrid-cell-c1-operateid" style=";text-align:center;;height:auto;">' +
                    '<a onclick="systemMenuAdd(' + data.id + ')" href="javascript:;">添加子菜单</a>';
            if(data.is_system!=1){
                html+= ' | <a onclick="systemMenuEdit(' + data.id + ')" href="javascript:;">修改</a> | <a onclick="systemMenuDelete(' + data.id + ')" href="javascript:;">删除</a>';
            }
            html+='</div></td></tr>';
            $("#dataBody").append(html);
            if (data.children.length > 0) {
                getChild(data.children, l, data.id);
            }
        }

    }

    function systemMenuAdd(parentid){
        if(typeof(parentid) !== 'number') parentid = 0;
        var url = "{:U('System/menuAdd')}";
        url += url.indexOf('?') != -1 ? '&parentid='+parentid : '?parentid='+parentid;
        $.dialog(url,"添加菜单",null,36);
    }



    //编辑
    function systemMenuEdit(id){
        if(typeof(id) !== 'number'){
            $.messager.alert('提示信息', '未选择菜单', 'error');
            return false;
        }
        var url = "{:U('System/menuEdit')}";
        url += url.indexOf('?') != -1 ? '&id='+id : '?id='+id;
        $.dialog(url,"修改菜单",null,36);
    }

    //删除
    function systemMenuDelete(id){
        if(typeof(id) !== 'number'){
            $.messager.alert('提示信息', '未选择菜单', 'error');
            return false;
        }
        $.messager.confirm('提示信息', '确定要删除吗？', function(result){
            if(!result) return false;
            $.post("{:U('System/menuDelete')}", {id: id}, function(res){
                if(!res.status){
                    $.messager.alert('提示信息', res.info, 'error');
                }else{
                    $.messager.alert('提示信息', res.info, 'info');
                    reloadContent();
                }
            }, 'json');
        });
    }
    //排序
    function systemMenuOrder(id){
        $.post('{:U("System/menuOrder")}', "order="+$('#system_menu_order_input'+id).val()+"&id="+id, function(res){
            if(!res.status){
                $.messager.alert('提示信息', res.info, 'error');
            }else{
                $.messager.alert('提示信息', res.info, 'info');
                reloadContent();
            }
        }, 'json');
    }
</script>